<template>
  <PageCard title="这班上的值不值" titleEnglish="Job Worth Calculator">
    <div class="job-worth-container">
      <!-- 主表单区域 -->
      <n-card :bordered="false" class="form-card">
        <n-form ref="formRef" :model="formData" label-placement="top">
          <!-- 薪资与工作时间 section -->
          <div class="form-section">
            <h3 class="section-title">💰 薪资与工作时间</h3>

            <n-grid :cols="24" :x-gap="12" :y-gap="16">
              <!-- 岗位名称输入 - PC端占一行，移动端占一行 -->
              <n-gi :span="24">
                <n-form-item label="岗位名称" path="jobTitle">
                  <n-input
                    v-model:value="formData.jobTitle"
                    placeholder="请输入岗位名称，如：高级前端工程师"
                    clearable
                  />
                </n-form-item>
              </n-gi>

              <!-- 年薪输入 - PC端一行两个，移动端一行一个 -->
              <n-gi :span="isMobile ? 24 : 12">
                <n-form-item label="年薪（元）" path="salary">
                  <n-input-number
                    v-model:value="formData.salary"
                    placeholder="请输入年薪（税前）"
                    :show-separator="true"
                    :min="0"
                    style="width: 100%"
                  >
                    <template #prefix>¥</template>
                  </n-input-number>
                </n-form-item>
              </n-gi>

              <!-- 国家/地区选择 - PC端一行两个，移动端一行一个 -->
              <n-gi :span="isMobile ? 24 : 12">
                <n-form-item label="国家/地区" path="countryCode">
                  <n-select
                    v-model:value="formData.countryCode"
                    :options="countryOptions"
                    placeholder="选择国家/地区"
                  />
                </n-form-item>
              </n-gi>

              <!-- 每周工作天数 - PC端一行两个，移动端一行两个 -->
              <n-gi :span="isMobile ? 12 : 12">
                <n-form-item label="每周工作天数" path="workDaysPerWeek">
                  <n-input-number
                    v-model:value="formData.workDaysPerWeek"
                    :min="1"
                    :max="7"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>

              <!-- 在家办公 - PC端一行两个，移动端一行两个 -->
              <n-gi :span="isMobile ? 12 : 12">
                <n-form-item path="wfhDaysPerWeek">
                  <template #label>
                    在家办公
                    <n-tooltip trigger="hover">
                      <template #trigger>
                        <n-icon size="14" color="#409eff" style="margin-left: 4px; vertical-align: middle;">
                          <InformationCircleOutline />
                        </n-icon>
                      </template>
                      这里填写的是前面工作天数中有多少天是在家办公的。
                    </n-tooltip>
                  </template>
                  <n-input-number
                    v-model:value="formData.wfhDaysPerWeek"
                    :min="0"
                    :max="formData.workDaysPerWeek"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>

              <!-- 年假天数 - PC端一行三个，移动端一行两个 -->
              <n-gi :span="isMobile ? 12 : 8">
                <n-form-item label="年假天数/d" path="annualLeave">
                  <n-input-number
                    v-model:value="formData.annualLeave"
                    :min="0"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>

              <!-- 法定假日 - PC端一行三个，移动端一行两个 -->
              <n-gi :span="isMobile ? 12 : 8">
                <n-form-item label="法定假日/d" path="publicHolidays">
                  <n-input-number
                    v-model:value="formData.publicHolidays"
                    :min="0"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>

              <!-- 带薪病假 - PC端一行三个，移动端一行两个 -->
              <n-gi :span="isMobile ? 12 : 8">
                <n-form-item label="带薪病假/d" path="paidSickLeave">
                  <n-input-number
                    v-model:value="formData.paidSickLeave"
                    :min="0"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>

              <!-- 总工时 - PC端一行三个，移动端一行两个 -->
              <n-gi :span="isMobile ? 12 : 8">
                <n-form-item path="workHours">
                  <template #label>
                    总工时/h
                    <n-tooltip trigger="hover">
                      <template #trigger>
                        <n-icon size="14" color="#409eff" style="margin-left: 4px; vertical-align: middle;">
                          <InformationCircleOutline />
                        </n-icon>
                      </template>
                      工时：是指"下班时间-上班时间"的总时间，包括吃饭、午休、加班等（不含通勤）。
                    </n-tooltip>
                  </template>
                  <n-input-number
                    v-model:value="formData.workHours"
                    :min="1"
                    :max="24"
                    :step="0.5"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>

              <!-- 通勤时间 - PC端一行三个，移动端一行两个 -->
              <n-gi :span="isMobile ? 12 : 8">
                <n-form-item path="commuteHours">
                  <template #label>
                    通勤/h
                    <n-tooltip trigger="hover">
                      <template #trigger>
                        <n-icon size="14" color="#409eff" style="margin-left: 4px; vertical-align: middle;">
                          <InformationCircleOutline />
                        </n-icon>
                      </template>
                      通勤时长是指上下班往返的总时间，即家到公司和公司回家的时间总和。
                    </n-tooltip>
                  </template>
                  <n-input-number
                    v-model:value="formData.commuteHours"
                    :min="0"
                    :max="8"
                    :step="0.5"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>

              <!-- 休息时间 - PC端一行三个，移动端一行两个 -->
              <n-gi :span="isMobile ? 12 : 8">
                <n-form-item label="休息&摸鱼/h" path="restTime">
                  <n-input-number
                    v-model:value="formData.restTime"
                    :min="0"
                    :max="4"
                    :step="0.5"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>
          </div>

          <n-divider />

          <!-- 环境与福利 section -->
          <div class="form-section">
            <h3 class="section-title">🏢 环境与福利</h3>

            <!-- 学历背景 -->
            <RadioGroup
              label="学历水平"
              v-model="formData.degreeType"
              :options="[
                { label: '专科及以下', value: 'belowBachelor' },
                { label: '本科', value: 'bachelor' },
                { label: '硕士', value: 'masters' },
                { label: '博士', value: 'phd' }
              ]"
            />

            <!-- 学校类型 -->
            <RadioGroup
              v-if="formData.degreeType !== 'belowBachelor'"
              label="学校类型"
              v-model="formData.schoolType"
              :options="schoolTypeOptions"
            />

            <!-- 硕士显示本科背景 -->
            <RadioGroup
              v-if="formData.degreeType === 'masters'"
              label="本科背景"
              v-model="formData.bachelorType"
              :options="[
                { label: '二本三本', value: 'secondTier' },
                { label: '双非/QS100', value: 'firstTier' },
                { label: '985/211/QS30', value: 'elite' }
              ]"
            />

            <!-- 工作年限 -->
            <RadioGroup
              label="工作年限"
              v-model="formData.workYears"
              :options="[
                { label: '应届生', value: '0' },
                { label: '1-3年', value: '1' },
                { label: '3-5年', value: '3' },
                { label: '5-8年', value: '5' },
                { label: '8-10年', value: '8' },
                { label: '10-12年', value: '10' },
                { label: '12年以上', value: '15' }
              ]"
            />

            <!-- 工作类型 -->
            <RadioGroup
              label="职业稳定度"
              v-model="formData.jobStability"
              :options="[
                { label: '政府/事业单位', value: 'government' },
                { label: '国企/大型企业', value: 'state' },
                { label: '外企/守法企业', value: 'foreign' },
                { label: '私企/狼性文化', value: 'private' },
                { label: '劳务派遣/OD', value: 'dispatch' },
                { label: '自由职业', value: 'freelance' }
              ]"
            />

            <!-- 工作环境 -->
            <RadioGroup
              label="工作环境"
              v-model="formData.workEnvironment"
              :options="[
                { label: '偏僻的工厂/工地/户外', value: '0.8' },
                { label: '工厂/工地/户外', value: '0.9' },
                { label: '普通办公室', value: '1.0' },
                { label: 'CBD/市中心', value: '1.1' }
              ]"
            />

            <!-- 城市等级 -->
            <RadioGroup
              label="城市等级"
              v-model="formData.cityFactor"
              :options="[
                { label: '一线城市', value: '0.70' },
                { label: '新一线', value: '0.80' },
                { label: '二线城市', value: '1.0' },
                { label: '三线城市', value: '1.10' },
                { label: '四线城市', value: '1.25' },
                { label: '县城', value: '1.40' },
                { label: '乡镇', value: '1.50' }
              ]"
            />

            <!-- 是否在家乡工作 -->
            <RadioGroup
              label="是否在家乡工作"
              v-model="formData.isHomeTown"
              :options="[
                { label: '是', value: 'true' },
                { label: '否', value: 'false' }
              ]"
            />

            <!-- 领导风格 -->
            <RadioGroup
              label="领导/老板"
              v-model="formData.leadership"
              :options="[
                { label: '对我不爽', value: '0.7' },
                { label: '管理严格', value: '0.9' },
                { label: '中规中矩', value: '1.0' },
                { label: '善解人意', value: '1.1' },
                { label: '我是嫡系', value: '1.3' }
              ]"
            />

            <!-- 团队氛围 -->
            <RadioGroup
              label="同事环境"
              v-model="formData.teamwork"
              :options="[
                { label: '都是傻逼', value: '0.9' },
                { label: '萍水相逢', value: '1.0' },
                { label: '和和睦睦', value: '1.1' },
                { label: '私交甚好', value: '1.2' }
              ]"
            />
            <n-divider/>

            <!-- 班车服务 -->
            <div class="checkbox-group">
              <n-checkbox v-model:checked="formData.hasShuttle">
                班车服务(加分项)
              </n-checkbox>
              <RadioGroup
                v-if="formData.hasShuttle"
                v-model="formData.shuttle"
                :options="[
                  { label: '很难坐', value: '1.0' },
                  { label: '比较难坐', value: '0.9' },
                  { label: '比较方便', value: '0.7' },
                  { label: '班车直达', value: '0.5' }
                ]"
              />
            </div>

            <!-- 食堂服务 -->
            <div class="checkbox-group">
              <n-checkbox v-model:checked="formData.hasCanteen">
                食堂情况（加分项）
              </n-checkbox>
              <RadioGroup
                v-if="formData.hasCanteen"
                v-model="formData.canteen"
                :options="[
                  { label: '很难吃', value: '1.0' },
                  { label: '食堂一般', value: '1.05' },
                  { label: '食堂不错', value: '1.1' },
                  { label: '食堂超赞', value: '1.15' }
                ]"
              />
            </div>
          </div>

          <!-- 计算按钮 -->
          <n-space justify="center" style="margin-top: 24px;">
            <n-button
              type="primary"
              size="large"
              :loading="calculating"
              @click="handleCalculate"
              :disabled="!formData.salary"
            >
              📊 计算工作价值
            </n-button>
          </n-space>
        </n-form>
      </n-card>

      <!-- 结果展示区域 -->
      <n-card
        v-if="hasCalculated && result"
        title="📈 评估结果"
        :bordered="false"
        class="result-card"
        style="margin-top: 24px;"
      >
        <div class="result-container">
          <!-- 主要指标展示 -->
          <n-grid :cols="24" :x-gap="16" :y-gap="16">
            <n-gi :span="8">
              <n-statistic label="年工作天数" :value="result.details.workDaysPerYear" suffix="天" />
            </n-gi>
            <n-gi :span="8">
              <n-statistic label="平均日薪" :value="result.details.dailySalary" :precision="2">
                <template #prefix>{{ getCurrencySymbol() }}</template>
              </n-statistic>
            </n-gi>
            <n-gi :span="8">
              <n-statistic
                label="工作价值"
                :value="Math.round(result.value * 100) / 100"
                :precision="2"
              />
            </n-gi>
          </n-grid>

          <!-- 评价等级 -->
          <div class="evaluation-result">
            <h3>综合评价</h3>
            <div :class="['grade-badge', getGradeClass(result.value)]">
              {{ result.grade || getValueAssessment(result.value) }}
            </div>
            <p class="grade-description">{{ result.gradeDescription || getGradeDescription(result.value) }}</p>
          </div>

          <!-- AI 智能分析 -->
          <div v-if="result" class="ai-analysis-section">
            <h3>🤖 AI 智能分析</h3>

            <div v-if="isAnalyzing && !aiAnalysisResult" class="loading-state">
              <n-spin size="large" :show="true">
                <template #description>
                  AI 正在深度分析您的工作价值评估结果，请稍候...
                </template>
              </n-spin>
            </div>

            <div v-else-if="aiAnalysisResult" class="analysis-result">
              <div class="streaming-result" :class="{ 'is-streaming': isAnalyzing }">
                <MarkdownRenderer :content="aiAnalysisResult" />
              </div>

            </div>
          </div>

          <!-- 详细分析 -->
          <div v-if="result" class="detail-analysis">
            <h3>详细分析</h3>
            <div v-for="comment in result.comments" :key="comment.title" class="analysis-item">
              <h4>{{ comment.emoji }} {{ comment.title }}</h4>
              <p>{{ comment.content }}</p>

              <!-- 详细参数展示 -->
              <div v-if="comment.details && comment.details.length > 0" class="comment-details">
                <div class="details-grid">
                  <div v-for="detail in comment.details" :key="detail.label" class="detail-item">
                    <span class="detail-label">{{ detail.label }}</span>
                    <span class="detail-value">{{ detail.value }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </n-card>

      <!-- 历史记录 -->
      <n-card
        v-if="history.length > 0"
        title="📜 历史记录"
        :bordered="false"
        class="history-card"
        style="margin-top: 24px;"
      >
        <n-list>
          <n-list-item v-for="item in history" :key="item.id">
            <template #prefix>
              <n-text :type="getHistoryItemType(item.value)">
                {{ item.value.toFixed(2) }}
              </n-text>
            </template>
            <n-thing :title="formatDate(item.timestamp)">
              <template #description>
                {{ item.assessment }} | 年薪：{{ item.salary }}元
              </template>
            </n-thing>
            <template #suffix>
              <n-space>
                <n-button size="small" @click="restoreHistory(item)">恢复</n-button>
                <n-button size="small" @click="deleteHistory(item.id)">删除</n-button>
              </n-space>
            </template>
          </n-list-item>
        </n-list>
        <n-button @click="clearHistory" style="margin-top: 16px;">清空历史</n-button>
      </n-card>
    </div>

    <!-- 分隔线 -->
    <n-divider />

    <!-- 使用说明 -->
    <UsageGuide
      :title="usageGuideConfig.title"
      :steps="usageGuideConfig.steps"
      :tips="usageGuideConfig.tips"
      :example="usageGuideConfig.example"
    />
  </PageCard>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
import { useMessage } from 'naive-ui'
import { InformationCircleOutline } from '@vicons/ionicons5'
import { useBreakpoint } from '@/utils/responsive-helper'
import PageCard from '@/components/PageCard.vue'
import UsageGuide from '@/components/UsageGuide.vue'
import MarkdownRenderer from '@/components/MarkdownRenderer.vue'
import RadioGroup from '@/components/RadioGroup.vue'
import { indexedDBUtils } from '@/utils/indexedDB'
import { analyzeJobWorth } from '@/api/entertainment/jobWorth'
import { SSEClient } from '@/utils/sse'

const message = useMessage()
const { isMobile } = useBreakpoint()
console.log('🚀 ~ isMobile:', isMobile.value)

// 表单引用
const formRef = ref()

// PPP转换因子 - 完整数据
const pppFactors: Record<string, number> = {
  'AF': 18.71, 'AO': 167.66, 'AL': 41.01, 'AR': 28.67, 'AM': 157.09, 'AG': 2.06, 'AU': 1.47, 'AT': 0.76, 'AZ': 0.50,
  'BI': 680.41, 'BE': 0.75, 'BJ': 211.97, 'BF': 209.84, 'BD': 32.81, 'BG': 0.70, 'BH': 0.18, 'BS': 0.88, 'BA': 0.66,
  'BY': 0.77, 'BZ': 1.37, 'BO': 2.60, 'BR': 2.36, 'BB': 2.24, 'BN': 0.58, 'BT': 20.11, 'BW': 4.54, 'CF': 280.19,
  'CA': 1.21, 'CH': 1.14, 'CL': 418.43, 'CN': 4.19, 'CI': 245.25, 'CM': 228.75, 'CD': 911.27, 'CG': 312.04,
  'CO': 1352.79, 'KM': 182.34, 'CV': 46.51, 'CR': 335.86, 'CY': 0.61, 'CZ': 12.66, 'DE': 0.75, 'DJ': 105.29,
  'DM': 1.69, 'DK': 6.60, 'DO': 22.90, 'DZ': 37.24, 'EC': 0.51, 'EG': 4.51, 'ES': 0.62, 'EE': 0.53, 'ET': 12.11,
  'FI': 0.84, 'FJ': 0.91, 'FR': 0.73, 'GA': 265.46, 'GB': 0.70, 'GE': 0.90, 'GH': 2.33, 'GN': 4053.64, 'GM': 17.79,
  'GW': 214.86, 'GQ': 229.16, 'GR': 0.54, 'GD': 1.64, 'GT': 4.01, 'GY': 73.60, 'HK': 6.07, 'HN': 10.91, 'HR': 3.21,
  'HT': 40.20, 'HU': 148.01, 'ID': 4673.65, 'IN': 21.99, 'IE': 0.78, 'IR': 30007.63, 'IQ': 507.58, 'IS': 145.34,
  'IL': 3.59, 'IT': 0.66, 'JM': 72.03, 'JO': 0.29, 'JP': 102.84, 'KZ': 139.91, 'KE': 43.95, 'KG': 18.28,
  'KH': 1400.09, 'KI': 1.00, 'KN': 1.92, 'KR': 861.82, 'LA': 2889.36, 'LB': 1414.91, 'LR': 0.41, 'LY': 0.48,
  'LC': 1.93, 'LK': 51.65, 'LS': 5.90, 'LT': 0.45, 'LU': 0.86, 'LV': 0.48, 'MO': 5.18, 'MA': 3.92, 'MD': 6.06,
  'MG': 1178.10, 'MV': 8.35, 'MX': 9.52, 'MK': 18.83, 'ML': 211.41, 'MT': 0.57, 'MM': 417.35, 'ME': 0.33,
  'MN': 931.67, 'MZ': 24.05, 'MR': 12.01, 'MU': 16.52, 'MW': 298.82, 'MY': 1.57, 'NA': 7.40, 'NE': 257.60,
  'NG': 144.27, 'NI': 11.75, 'NL': 0.77, 'NO': 10.03, 'NP': 33.52, 'NZ': 1.45, 'PK': 38.74, 'PA': 0.46,
  'PE': 1.80, 'PH': 19.51, 'PG': 2.11, 'PL': 1.78, 'PR': 0.92, 'PT': 0.57, 'PY': 2575.54, 'PS': 0.57,
  'QA': 2.06, 'RO': 1.71, 'RU': 25.88, 'RW': 339.88, 'SA': 1.61, 'SD': 21.85, 'SN': 245.98, 'SG': 0.84,
  'SB': 7.08, 'SL': 2739.26, 'SV': 0.45, 'SO': 9107.78, 'RS': 41.13, 'ST': 10.94, 'SR': 3.55, 'SK': 0.53,
  'SI': 0.56, 'SE': 8.77, 'SZ': 6.36, 'SC': 7.82, 'TC': 1.07, 'TD': 220.58, 'TG': 236.83, 'TH': 12.34,
  'TJ': 2.30, 'TL': 0.41, 'TT': 4.15, 'TN': 0.91, 'TR': 2.13, 'TV': 1.29, 'TW': 13.85, 'TZ': 888.32,
  'UG': 1321.35, 'UA': 7.69, 'UY': 28.45, 'US': 1.00, 'UZ': 2297.17, 'VC': 1.54, 'VN': 7473.67, 'VU': 110.17,
  'XK': 0.33, 'ZA': 6.93, 'ZM': 5.59, 'ZW': 24.98
}

// 货币符号映射 - 完整数据
const currencySymbols: Record<string, string> = {
  'AF': '؋', 'AL': 'L', 'DZ': 'د.ج', 'AO': 'Kz', 'AR': '$', 'AM': '֏', 'AU': 'A$', 'AT': '€', 'AZ': '₼',
  'BI': 'FBu', 'BE': '€', 'BJ': 'CFA', 'BF': 'CFA', 'BD': '৳', 'BG': 'лв', 'BH': '.د.ب', 'BS': 'B$', 'BA': 'KM',
  'BY': 'Br', 'BZ': 'BZ$', 'BO': 'Bs', 'BR': 'R$', 'BB': 'Bds$', 'BN': 'B$', 'BT': 'Nu.', 'BW': 'P', 'CA': 'C$',
  'CH': 'CHF', 'CL': 'CLP$', 'CN': '¥', 'CI': 'CFA', 'CM': 'FCFA', 'CD': 'FC', 'CG': 'FCFA', 'CO': 'Col$',
  'CR': '₡', 'CY': '€', 'CZ': 'Kč', 'DE': '€', 'DK': 'kr', 'DO': 'RD$', 'EC': '$', 'EG': 'E£', 'ES': '€',
  'EE': '€', 'ET': 'Br', 'FI': '€', 'FJ': 'FJ$', 'FR': '€', 'GB': '£', 'GE': '₾', 'GH': '₵', 'GR': '€',
  'GT': 'Q', 'HK': 'HK$', 'HN': 'L', 'HR': '€', 'HU': 'Ft', 'ID': 'Rp', 'IN': '₹', 'IE': '€', 'IR': '﷼',
  'IQ': 'ع.د', 'IS': 'kr', 'IL': '₪', 'IT': '€', 'JM': 'J$', 'JO': 'JD', 'JP': '¥', 'KE': 'KSh', 'KR': '₩',
  'KW': 'د.ك', 'LB': 'L£', 'LK': 'Rs', 'LT': '€', 'LU': '€', 'LV': '€', 'MA': 'د.م.', 'MX': 'Mex$', 'MY': 'RM',
  'NG': '₦', 'NL': '€', 'NO': 'kr', 'NP': 'रू', 'NZ': 'NZ$', 'PK': '₨', 'PA': 'B/.', 'PE': 'S/.', 'PH': '₱',
  'PL': 'zł', 'PT': '€', 'QA': 'ر.ق', 'RO': 'lei', 'RU': '₽', 'SA': 'ر.س', 'SG': 'S$', 'SK': '€', 'SI': '€',
  'SE': 'kr', 'TH': '฿', 'TR': '₺', 'TW': 'NT$', 'UA': '₴', 'US': '$', 'UY': '$U', 'VN': '₫', 'ZA': 'R'
}

// 详细信息项接口
interface DetailItem {
  label: string
  value: string
}

// 评论项接口
interface CommentItem {
  title: string
  content: string
  emoji: string
  details?: DetailItem[]
}

// 表单数据接口
interface FormData {
  jobTitle: string
  salary: number | null
  countryCode: string
  workDaysPerWeek: number
  wfhDaysPerWeek: number
  annualLeave: number
  paidSickLeave: number
  publicHolidays: number
  workHours: number
  commuteHours: number
  restTime: number
  cityFactor: string
  workEnvironment: string
  leadership: string
  teamwork: string
  degreeType: string
  schoolType: string
  bachelorType: string
  workYears: string
  shuttle: string
  canteen: string
  jobStability: string
  hasShuttle: boolean
  hasCanteen: boolean
  isHomeTown: string
}

// 历史记录接口
interface HistoryItem {
  id: string
  timestamp: number
  value: number
  assessment: string
  salary: number
  countryCode: string
  formData: FormData
}

// 本地计算结果接口
interface JobWorthResultVO {
  value: number
  grade: string
  gradeDescription: string
  details: {
    dailySalary: number
    workDaysPerYear: number
    environmentFactor: number
    effectiveWorkHours: number
    educationFactor: number
    experienceMultiplier: number
  }
  calculationTime: number
  comments: CommentItem[]
}

// 响应式数据
const calculating = ref(false)
const hasCalculated = ref(false)
const result = ref<JobWorthResultVO | null>(null)
const history = ref<HistoryItem[]>([])

// AI 分析相关状态
const isAnalyzing = ref(false)
const aiAnalysisResult = ref<string>('')

// 表单数据
const formData = reactive<FormData>({
  jobTitle: '',
  salary: null,
  countryCode: 'CN',
  workDaysPerWeek: 5,
  wfhDaysPerWeek: 0,
  annualLeave: 5,
  paidSickLeave: 3,
  publicHolidays: 13,
  workHours: 10,
  commuteHours: 2,
  restTime: 2,
  cityFactor: '1.0',
  workEnvironment: '1.0',
  leadership: '1.0',
  teamwork: '1.0',
  degreeType: 'bachelor',
  schoolType: 'firstTier',
  bachelorType: 'firstTier',
  workYears: '0',
  shuttle: '1.0',
  canteen: '1.0',
  jobStability: 'private',
  hasShuttle: false,
  hasCanteen: false,
  isHomeTown: 'false'
})

// 国家选项
const countryOptions = computed(() => {
  return Object.entries(pppFactors).map(([code, factor]) => ({
    label: `${getCountryName(code)} (PPP: ${factor})`,
    value: code
  }))
})

// 学校类型选项
const schoolTypeOptions = computed(() => {
  if (formData.degreeType === 'bachelor') {
    return [
      { label: '二本三本', value: 'secondTier' },
      { label: '双非/QS100/USnews50', value: 'firstTier' },
      { label: '985/211/QS30/USnews20', value: 'elite' }
    ]
  } else {
    return [
      { label: '二本三本', value: 'secondTier' },
      { label: '双非/QS100/USnews50', value: 'firstTier' },
      { label: '985/211/QS30/USnews20', value: 'elite' }
    ]
  }
})


// 计算教育系数（用于传递给后端）
const calculateEducationFactor = (): number => {
  let factor = 1.0

  if (formData.degreeType === 'belowBachelor') {
    factor = 0.8
  } else if (formData.degreeType === 'bachelor') {
    if (formData.schoolType === 'secondTier') factor = 0.9
    else if (formData.schoolType === 'firstTier') factor = 1.0
    else if (formData.schoolType === 'elite') factor = 1.2
  } else if (formData.degreeType === 'masters') {
    let bachelorBase = 1.0
    if (formData.bachelorType === 'secondTier') bachelorBase = 0.9
    else if (formData.bachelorType === 'firstTier') bachelorBase = 1.0
    else if (formData.bachelorType === 'elite') bachelorBase = 1.2

    let mastersBonus = 0.5
    if (formData.schoolType === 'secondTier') mastersBonus = 0.4
    else if (formData.schoolType === 'firstTier') mastersBonus = 0.5
    else if (formData.schoolType === 'elite') mastersBonus = 0.6

    factor = bachelorBase + mastersBonus
  } else if (formData.degreeType === 'phd') {
    if (formData.schoolType === 'secondTier') factor = 1.6
    else if (formData.schoolType === 'firstTier') factor = 1.8
    else if (formData.schoolType === 'elite') factor = 2.0
  }

  return factor
}

// 计算经验倍数（用于传递给后端）
const calculateExperienceMultiplier = (): number => {
  const workYears = Number(formData.workYears)
  let baseSalaryMultiplier = 1.0

  if (workYears === 0) {
    // 应届生根据工作类型调整
    if (formData.jobStability === 'government') return 0.8
    else if (formData.jobStability === 'state') return 0.9
    else if (formData.jobStability === 'foreign') return 0.95
    else if (formData.jobStability === 'private') return 1.0
    else if (formData.jobStability === 'dispatch') return 1.1
  } else {
    // 基准增长曲线
    if (workYears === 1) baseSalaryMultiplier = 1.5
    else if (workYears <= 3) baseSalaryMultiplier = 2.2
    else if (workYears <= 5) baseSalaryMultiplier = 3.0
    else if (workYears <= 8) baseSalaryMultiplier = 4.5
    else if (workYears <= 10) baseSalaryMultiplier = 6.0
    else if (workYears <= 15) baseSalaryMultiplier = 7.5
    else baseSalaryMultiplier = 8.5

    // 工作类型影响系数
    let salaryGrowthFactor = 1.0
    if (formData.jobStability === 'foreign') salaryGrowthFactor = 0.8
    else if (formData.jobStability === 'state') salaryGrowthFactor = 0.4
    else if (formData.jobStability === 'government') salaryGrowthFactor = 0.2
    else if (formData.jobStability === 'dispatch') salaryGrowthFactor = 1.2

    return 1 + (baseSalaryMultiplier - 1) * salaryGrowthFactor
  }

  return 1.0
}

// 获取评价等级（基于后端返回的结果）
const getValueAssessment = (value?: number) => {
  if (!formData.salary) return '请输入薪资'
  if (value === undefined || value === null) return '计算中...'
  if (value < 0.6) return '太糟糕了'
  if (value < 1.0) return '比较差'
  if (value <= 1.8) return '一般般'
  if (value <= 2.5) return '还不错'
  if (value <= 3.2) return '很好'
  if (value <= 4.0) return '优秀'
  return '完美'
}

// 获取等级描述（基于后端返回的结果）
const getGradeDescription = (value?: number) => {
  if (!value) return ''
  if (value < 0.6) return '建议认真考虑是否需要换工作'
  if (value < 1.0) return '工作性价比较低，有提升空间'
  if (value <= 1.8) return '工作性价比一般，符合市场平均水平'
  if (value <= 2.5) return '工作性价比不错，值得继续'
  if (value <= 3.2) return '工作性价比很高，是份好工作'
  if (value <= 4.0) return '工作性价比极高，请好好珍惜'
  return '这是梦想中的完美工作！'
}

// 获取等级样式类（基于后端返回的结果）
const getGradeClass = (value?: number) => {
  if (!value) return ''
  if (value < 0.6) return 'grade-terrible'
  if (value < 1.0) return 'grade-poor'
  if (value <= 1.8) return 'grade-average'
  if (value <= 2.5) return 'grade-good'
  if (value <= 3.2) return 'grade-great'
  if (value <= 4.0) return 'grade-excellent'
  return 'grade-perfect'
}

// 获取历史记录项类型
const getHistoryItemType = (value: number) => {
  if (value < 1.0) return 'error'
  if (value <= 1.8) return 'warning'
  if (value <= 3.2) return 'info'
  return 'success'
}

// 获取货币符号
const getCurrencySymbol = () => {
  return currencySymbols[formData.countryCode] || '¥'
}

// 国家名称映射
const countryNames: Record<string, string> = {
  'AF': '阿富汗', 'AO': '安哥拉', 'AL': '阿尔巴尼亚', 'AR': '阿根廷', 'AM': '亚美尼亚', 'AG': '安提瓜和巴布达', 'AU': '澳大利亚', 'AT': '奥地利', 'AZ': '阿塞拜疆',
  'BI': '布隆迪', 'BE': '比利时', 'BJ': '贝宁', 'BF': '布基纳法索', 'BD': '孟加拉国', 'BG': '保加利亚', 'BH': '巴林', 'BS': '巴哈马', 'BA': '波斯尼亚和黑塞哥维那',
  'BY': '白俄罗斯', 'BZ': '伯利兹', 'BO': '玻利维亚', 'BR': '巴西', 'BB': '巴巴多斯', 'BN': '文莱', 'BT': '不丹', 'BW': '博茨瓦纳', 'CF': '中非共和国',
  'CA': '加拿大', 'CH': '瑞士', 'CL': '智利', 'CN': '中国', 'CI': '科特迪瓦', 'CM': '喀麦隆', 'CD': '刚果民主共和国', 'CG': '刚果共和国',
  'CO': '哥伦比亚', 'KM': '科摩罗', 'CV': '佛得角', 'CR': '哥斯达黎加', 'CY': '塞浦路斯', 'CZ': '捷克', 'DE': '德国', 'DJ': '吉布提',
  'DM': '多米尼克', 'DK': '丹麦', 'DO': '多米尼加共和国', 'DZ': '阿尔及利亚', 'EC': '厄瓜多尔', 'EG': '埃及', 'ES': '西班牙',
  'EE': '爱沙尼亚', 'ET': '埃塞俄比亚', 'FI': '芬兰', 'FJ': '斐济', 'FR': '法国', 'GA': '加蓬', 'GB': '英国', 'GE': '格鲁吉亚',
  'GH': '加纳', 'GN': '几内亚', 'GM': '冈比亚', 'GW': '几内亚比绍', 'GQ': '赤道几内亚', 'GR': '希腊', 'GD': '格林纳达', 'GT': '危地马拉',
  'GY': '圭亚那', 'HK': '香港', 'HN': '洪都拉斯', 'HR': '克罗地亚', 'HT': '海地', 'HU': '匈牙利', 'ID': '印度尼西亚', 'IN': '印度',
  'IE': '爱尔兰', 'IR': '伊朗', 'IQ': '伊拉克', 'IS': '冰岛', 'IL': '以色列', 'IT': '意大利', 'JM': '牙买加', 'JO': '约旦',
  'JP': '日本', 'KZ': '哈萨克斯坦', 'KE': '肯尼亚', 'KG': '吉尔吉斯斯坦', 'KH': '柬埔寨', 'KI': '基里巴斯', 'KN': '圣基茨和尼维斯',
  'KR': '韩国', 'LA': '老挝', 'LB': '黎巴嫩', 'LR': '利比里亚', 'LY': '利比亚', 'LC': '圣卢西亚', 'LK': '斯里兰卡', 'LS': '莱索托',
  'LT': '立陶宛', 'LU': '卢森堡', 'LV': '拉脱维亚', 'MO': '澳门', 'MA': '摩洛哥', 'MD': '摩尔多瓦', 'MG': '马达加斯加',
  'MV': '马尔代夫', 'MX': '墨西哥', 'MK': '北马其顿', 'ML': '马里', 'MT': '马耳他', 'MM': '缅甸', 'ME': '黑山', 'MN': '蒙古',
  'MZ': '莫桑比克', 'MR': '毛里塔尼亚', 'MU': '毛里求斯', 'MW': '马拉维', 'MY': '马来西亚', 'NA': '纳米比亚', 'NE': '尼日尔',
  'NG': '尼日利亚', 'NI': '尼加拉瓜', 'NL': '荷兰', 'NO': '挪威', 'NP': '尼泊尔', 'NZ': '新西兰', 'PK': '巴基斯坦',
  'PA': '巴拿马', 'PE': '秘鲁', 'PH': '菲律宾', 'PG': '巴布亚新几内亚', 'PL': '波兰', 'PR': '波多黎各', 'PT': '葡萄牙',
  'PY': '巴拉圭', 'PS': '巴勒斯坦', 'QA': '卡塔尔', 'RO': '罗马尼亚', 'RU': '俄罗斯', 'RW': '卢旺达', 'SA': '沙特阿拉伯',
  'SD': '苏丹', 'SN': '塞内加尔', 'SG': '新加坡', 'SB': '所罗门群岛', 'SL': '塞拉利昂', 'SV': '萨尔瓦多', 'SO': '索马里',
  'RS': '塞尔维亚', 'ST': '圣多美和普林西比', 'SR': '苏里南', 'SK': '斯洛伐克', 'SI': '斯洛文尼亚', 'SE': '瑞典', 'SZ': '斯威士兰',
  'SC': '塞舌尔', 'TC': '土耳其和凯科斯群岛', 'TD': '乍得', 'TG': '多哥', 'TH': '泰国', 'TJ': '塔吉克斯坦', 'TL': '东帝汶',
  'TT': '特立尼达和多巴哥', 'TN': '突尼斯', 'TR': '土耳其', 'TV': '图瓦卢', 'TW': '台湾', 'TZ': '坦桑尼亚', 'UG': '乌干达',
  'UA': '乌克兰', 'UY': '乌拉圭', 'US': '美国', 'UZ': '乌兹别克斯坦', 'VC': '圣文森特和格林纳丁斯', 'VN': '越南', 'VU': '瓦努阿图',
  'XK': '科索沃', 'ZA': '南非', 'ZM': '赞比亚', 'ZW': '津巴布韦'
}

// 获取国家名称
const getCountryName = (code: string) => {
  return countryNames[code] || code
}

// 格式化日期
const formatDate = (timestamp: number) => {
  const date = new Date(timestamp)
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}

// 获取emoji表情
const getEmoji = (value: number): string => {
  if (value < 0.6) return '😭'
  if (value < 1.0) return '😔'
  if (value <= 1.8) return '😐'
  if (value <= 2.5) return '😊'
  if (value <= 3.2) return '😁'
  if (value <= 4.0) return '🤩'
  return '🎉'
}

// ========== 本地计算逻辑函数 ==========

// 计算年工作天数
const calculateWorkingDays = (): number => {
  const weeksPerYear = 52
  const totalWorkDays = weeksPerYear * Number(formData.workDaysPerWeek)
  const totalLeaves = Number(formData.annualLeave) + Number(formData.publicHolidays) + Number(formData.paidSickLeave) * 0.6 // 带薪病假按60%权重计算
  return Math.max(totalWorkDays - totalLeaves, 0)
}

// 计算日薪（PPP调整后）
const calculateDailySalary = (workDaysPerYear: number): number => {
  if (!formData.salary) return 0

  // 应用PPP转换因子标准化薪资
  const isNonChina = formData.countryCode !== 'CN'
  const pppFactor = isNonChina ? pppFactors[formData.countryCode] || 4.19 : 4.19
  const standardizedSalary = Number(formData.salary) * (4.19 / pppFactor)

  return standardizedSalary / workDaysPerYear
}

// 计算有效工作小时数
const calculateEffectiveWorkHours = (): number => {
  return formData.workHours - formData.restTime
}

// 计算环境因子
const calculateEnvironmentFactor = (): number => {
  const cityFactor = Number(formData.cityFactor)
  const workEnvironment = Number(formData.workEnvironment)
  const leadership = Number(formData.leadership)
  const teamwork = Number(formData.teamwork)
  const shuttleFactor = formData.hasShuttle ? Number(formData.shuttle) : 1.0
  const canteenFactor = formData.hasCanteen ? Number(formData.canteen) : 1.0

  return cityFactor * workEnvironment * leadership * teamwork * shuttleFactor * canteenFactor
}

// 计算工作价值评分
const calculateJobWorthValue = (): number => {
  if (!formData.salary) return 0

  const workDaysPerYear = calculateWorkingDays()
  const dailySalary = calculateDailySalary(workDaysPerYear)
  const workHours = Number(formData.workHours)
  const commuteHours = Number(formData.commuteHours)
  const restTime = Number(formData.restTime)

  // 确保正确转换为数字
  const workDaysPerWeek = Number(formData.workDaysPerWeek) || 5

  // 允许wfhDaysPerWeek为空字符串，计算时才处理为0
  const wfhInput = String(formData.wfhDaysPerWeek).trim()
  const wfhDaysPerWeek = wfhInput === '' ? 0 : Math.min(parseFloat(wfhInput) || 0, workDaysPerWeek)

  // 确保有办公室工作天数时才计算比例，否则设为0
  const officeDaysRatio = workDaysPerWeek > 0 ? (workDaysPerWeek - wfhDaysPerWeek) / workDaysPerWeek : 0

  // 班车系数只在勾选时使用，否则为1.0
  const shuttleFactor = formData.hasShuttle ? Number(formData.shuttle) : 1.0
  const effectiveCommuteHours = commuteHours * officeDaysRatio * shuttleFactor

  // 食堂系数只在勾选时使用，否则为1.0
  const canteenFactor = formData.hasCanteen ? Number(formData.canteen) : 1.0

  // 工作环境因素，包含食堂因素
  const environmentFactor = Number(formData.workEnvironment) *
                          Number(formData.leadership) *
                          Number(formData.teamwork) *
                          Number(formData.cityFactor) *
                          canteenFactor

  // 根据工作年限计算经验薪资倍数
  const workYears = Number(formData.workYears)
  let experienceSalaryMultiplier = 1.0

  if (workYears === 0) {
    // 应届生：直接根据工作类型设定初始调整系数
    if (formData.jobStability === 'government') {
      experienceSalaryMultiplier = 0.8    // 政府/事业单位稳定性高，价值相对高
    } else if (formData.jobStability === 'state') {
      experienceSalaryMultiplier = 0.9    // 国企/大型企业较稳定，价值相对高
    } else if (formData.jobStability === 'foreign') {
      experienceSalaryMultiplier = 0.95   // 外企/守法企业，较为稳定
    } else if (formData.jobStability === 'private') {
      experienceSalaryMultiplier = 1.0    // 私企/狼性文化作为基准
    } else if (formData.jobStability === 'dispatch') {
      experienceSalaryMultiplier = 1.1    // 劳务派遣/OD风险高，价值相对低
    } else if (formData.jobStability === 'freelance') {
      experienceSalaryMultiplier = 1.1    // 自由职业风险高，价值相对低
    }
  } else {
    // 非应届生：使用基于增长预期的模型

    // 基准薪资增长曲线（适用于私企）
    let baseSalaryMultiplier = 1.0
    if (workYears === 1) baseSalaryMultiplier = 1.5
    else if (workYears <= 3) baseSalaryMultiplier = 2.2
    else if (workYears <= 5) baseSalaryMultiplier = 2.7
    else if (workYears <= 8) baseSalaryMultiplier = 3.2
    else if (workYears <= 10) baseSalaryMultiplier = 3.6
    else baseSalaryMultiplier = 3.9

    // 工作单位类型对涨薪幅度的影响系数
    let salaryGrowthFactor = 1.0  // 私企/狼性文化基准
    if (formData.jobStability === 'foreign') {
      salaryGrowthFactor = 0.8    // 外企/守法企业涨薪幅度为私企的80%
    } else if (formData.jobStability === 'state') {
      salaryGrowthFactor = 0.4    // 国企/大型企业涨薪幅度为私企的40%
    } else if (formData.jobStability === 'government') {
      salaryGrowthFactor = 0.2    // 政府/事业单位涨薪幅度为私企的20%
    } else if (formData.jobStability === 'dispatch') {
      salaryGrowthFactor = 1.2    // 劳务派遣/OD涨薪幅度为私企的120%
    } else if (formData.jobStability === 'freelance') {
      salaryGrowthFactor = 1.2    // 自由职业涨薪幅度为私企的120%
    }

    // 根据公式: 1 + (对应幅度-1) * 工作单位系数，计算最终薪资倍数
    experienceSalaryMultiplier = 1 + (baseSalaryMultiplier - 1) * salaryGrowthFactor
  }

  // 计算教育因子
  const educationFactor = calculateEducationFactor()

  // 计算最终价值
  const numerator = dailySalary * environmentFactor
  const denominator = 35 * (workHours + effectiveCommuteHours - 0.5 * restTime) * educationFactor * experienceSalaryMultiplier

  // 防护性检查避免NaN
  if (denominator === 0 || isNaN(numerator) || isNaN(denominator)) {
    console.error('计算错误:', {
      dailySalary,
      environmentFactor,
      workHours,
      effectiveCommuteHours,
      restTime,
      educationFactor,
      experienceSalaryMultiplier,
      numerator,
      denominator
    })
    return 0
  }

  return numerator / denominator
}

// 获取城市描述
const getCityDesc = (cityFactor: string): string => {
  const factor = parseFloat(cityFactor)
  if (factor <= 0.70) return '一线城市'
  if (factor <= 0.80) return '新一线城市'
  if (factor <= 1.0) return '二线城市'
  if (factor <= 1.10) return '三线城市'
  if (factor <= 1.25) return '四线城市'
  if (factor <= 1.40) return '县城'
  return '乡镇'
}

// 获取工作环境描述
const getWorkEnvDesc = (env: string): string => {
  if (env === '0.8') return '远程办公'
  if (env === '0.9') return '工厂/郊区'
  if (env === '1.0') return '普通办公室'
  if (env === '1.1') return 'CBD/市中心'
  return '普通办公室'
}

// 获取领导评价
const getLeadershipDesc = (rating: string): string => {
  if (rating === '0.7') return '对我不爽'
  if (rating === '0.9') return '管理严格'
  if (rating === '1.0') return '中规中矩'
  if (rating === '1.1') return '善解人意'
  if (rating === '1.3') return '我是嫡系'
  return '中规中矩'
}

// 获取团队描述
const getTeamDesc = (rating: string): string => {
  if (rating === '0.9') return '都是傻逼'
  if (rating === '1.0') return '萍水相逢'
  if (rating === '1.1') return '和和睦睦'
  if (rating === '1.2') return '私交甚好'
  return '萍水相逢'
}

// 获取工作类型描述
const getJobStabilityDesc = (type: string): string => {
  if (type === 'government') return '政府/事业单位'
  if (type === 'state') return '国企/大型企业'
  if (type === 'foreign') return '外企/守法企业'
  if (type === 'private') return '私企/狼性文化'
  if (type === 'dispatch') return '劳务派遣/OD'
  if (type === 'freelance') return '自由职业'
  return '私企/狼性文化'
}

// 获取学历描述
const getDegreeDesc = (type: string): string => {
  if (type === 'belowBachelor') return '专科及以下'
  if (type === 'bachelor') return '本科'
  if (type === 'masters') return '硕士'
  if (type === 'phd') return '博士'
  return '本科'
}

// 生成详细的个性化评价
const generateComments = (value: number, details: any): CommentItem[] => {
  const comments = []

  // 1. 总体评价
  let mainComment = ""
  if (value < 0.6) {
    mainComment = "这份工作对你来说简直是一场噩梦，每一天都是艰难的挑战。"
  } else if (value < 1.0) {
    mainComment = "这份工作让你疲惫不堪，但或许是通往更好未来的必经之路。"
  } else if (value <= 1.8) {
    mainComment = "这份工作平平淡淡，既没有太多惊喜，也没有太多失望。"
  } else if (value <= 2.5) {
    mainComment = "这份工作给你带来了不少成就感，是一份令人满意的选择。"
  } else if (value <= 3.2) {
    mainComment = "这份工作几乎满足了你的所有期望，每天都充满干劲。"
  } else if (value <= 4.0) {
    mainComment = "这份工作简直是为你量身定做的，既有挑战又有回报，令你心满意足。"
  } else {
    mainComment = "恭喜你找到了人生中的理想工作，这样的机会可遇而不可求！"
  }

  comments.push({
    title: '最终评估',
    content: mainComment,
    emoji: getEmoji(value),
    details: [
      { label: '工作性价比', value: `${value.toFixed(2)} (${getValueAssessment(value)})` }
    ]
  })

  // 2. 工作城市评价
  const cityName = getCityDesc(formData.cityFactor)
  let cityComment = ""

  if (formData.cityFactor === '0.70' || formData.cityFactor === '0.80') {
    cityComment = "虽然生活成本较高，但丰富的机会和广阔的平台能够助你更快成长。"
  } else if (formData.cityFactor === '1.0' || formData.cityFactor === '1.10') {
    cityComment = "生活节奏虽然没有一线城市那么快，但依然提供了不错的发展空间。这里的生活压力适中，让你能找到工作与生活之间的平衡。"
  } else {
    cityComment = "你享受着低成本高质量的生活。虽然机会相对较少，但悠闲的生活节奏和较低的压力让你能更从容地面对人生。"
  }

  // 添加家乡工作相关评论
  if (formData.isHomeTown === 'true') {
    cityComment += " 在家乡工作，让你既能追求事业，又能照顾家人，平衡感满满。家的温暖和熟悉的环境给你带来额外的安全感和幸福感。"
  } else {
    cityComment += " 要照顾好自己，按时吃饭休息，你一个人去得那么远。"
  }

  const cityDetails = [
    { label: '城市等级', value: cityName },
    { label: '工作国家/地区', value: getCountryName(formData.countryCode) },
    { label: '工作地点', value: formData.isHomeTown === 'true' ? '在家乡' : '不在家乡' }
  ]

  comments.push({
    title: '工作城市',
    content: cityComment,
    emoji: formData.isHomeTown === 'true' ? "🏡" : "🌆",
    details: cityDetails
  })

  // 3. 通勤与WFH评价
  const commuteHoursNum = formData.commuteHours
  const wfhDaysNum = formData.wfhDaysPerWeek
  const workDaysNum = formData.workDaysPerWeek
  const wfhRatio = workDaysNum > 0 ? (wfhDaysNum / workDaysNum) : 0

  let commuteComment = ""

  if (commuteHoursNum <= 1) {
    commuteComment = "你的通勤时间很短，让你每天都能多出宝贵的时间用于自我提升或休息。"
  } else if (commuteHoursNum <= 2) {
    commuteComment = "你的通勤时间适中，不会让你感到太大压力，也可以利用这段时间听书或补觉。"
  } else {
    commuteComment = "你长时间的通勤占用了大量宝贵时间，会对身心健康造成一定影响，建议考虑搬家或换工作以改善。"
  }

  if (wfhRatio >= 0.6) {
    commuteComment += " 而且你有大量居家办公的机会，进一步减轻了通勤负担，提高了工作生活质量。"
  } else if (wfhRatio >= 0.2) {
    commuteComment += " 你的部分居家办公安排也为你节省了不少通勤时间。"
  }

  const commuteDetails = [
    { label: '每天通勤时间', value: `${formData.commuteHours} 小时` },
    { label: '远程办公', value: `${formData.wfhDaysPerWeek}/${formData.workDaysPerWeek} 天/周 (${Math.round(wfhRatio * 100)}%)` }
  ]

  if (formData.hasShuttle) {
    const shuttleDesc = formData.shuttle === '0.5' ? '班车直达' : formData.shuttle === '0.7' ? '便利班车' : '班车不便'
    commuteDetails.push({ label: '班车服务', value: shuttleDesc })
    if (formData.shuttle === '0.7' || formData.shuttle === '0.5') {
      commuteComment += " 公司提供的便利班车服务是一个不小的福利，让你的通勤更轻松愉快。"
    }
  }

  comments.push({
    title: '通勤情况',
    content: commuteComment,
    emoji: wfhRatio >= 0.5 ? "🏠" : "🚌",
    details: commuteDetails
  })

  // 4. 工作环境与人际关系评价
  const leadershipRating = formData.leadership
  const teamworkRating = formData.teamwork
  const workEnvironment = formData.workEnvironment

  let environmentComment = ""

  if (workEnvironment === '1.1') {
    environmentComment = "在CBD的办公环境既专业又现代化，提供了良好的职业形象和便利的工作条件。"
  } else if (workEnvironment === '0.8' || workEnvironment === '0.9') {
    environmentComment = "在工厂/户外环境工作确实有些挑战，但也培养了你的坚韧品质和适应能力。"
  } else {
    environmentComment = "你的工作环境舒适适中，能满足基本需求，为高效工作提供了足够的保障。"
  }

  // 领导关系评价
  if (leadershipRating === '1.3') {
    environmentComment += " 你享受着作为嫡系的优越待遇和发展机会，但也面临着更高的期望和责任。"
  } else if (leadershipRating === '1.1') {
    environmentComment += " 你的领导能够理解你的工作状态并提供必要的支持，这在职场中非常难得。"
  } else if (leadershipRating === '1.0') {
    environmentComment += " 你和领导各司其职，这种关系虽然普通但稳定可靠。"
  } else if (leadershipRating === '0.9') {
    environmentComment += " 你领导的管理风格较为严格，这种严格虽然有时让人压力大，但也能促使你更加专业和自律。"
  } else if (leadershipRating === '0.7') {
    environmentComment += " 你与领导之间的关系有些紧张，这种情况下要学会保持情绪稳定，专注于工作本身，同时提升自己的沟通技巧。"
  }

  // 同事关系评价
  if (teamworkRating === '1.2') {
    environmentComment += " 你与同事们建立了深厚的私人友谊，工作之余还能互相支持和陪伴。"
  } else if (teamworkRating === '1.1') {
    environmentComment += " 团队氛围和谐友善，同事之间相互尊重和支持。"
  } else if (teamworkRating === '1.0') {
    environmentComment += " 与同事们相处和平但不过分亲近。"
  } else if (teamworkRating === '0.9') {
    environmentComment += " 同事关系略显紧张，但也锻炼了你的独立工作能力。"
  }

  const environmentDetails = [
    { label: '办公环境', value: getWorkEnvDesc(workEnvironment) },
    { label: '领导关系', value: getLeadershipDesc(leadershipRating) },
    { label: '同事关系', value: getTeamDesc(teamworkRating) }
  ]

  if (formData.hasCanteen) {
    const canteenDesc = formData.canteen === '1.15' ? '食堂超赞' : formData.canteen === '1.1' ? '食堂不错' : formData.canteen === '1.05' ? '食堂一般' : '很难吃'
    environmentDetails.push({ label: '食堂情况', value: canteenDesc })
  }

  comments.push({
    title: '工作环境',
    content: environmentComment,
    emoji: "🏢",
    details: environmentDetails
  })

  // 5. 工作时间与强度评价
  const workHoursNum = formData.workHours
  const restTimeNum = formData.restTime
  const effectiveWorkTime = workHoursNum + formData.commuteHours - 0.5 * restTimeNum

  let workTimeComment = ""
  if (effectiveWorkTime <= 8) {
    workTimeComment = "你的工作强度适中，有足够的时间照顾个人生活，保持着良好的工作生活平衡。"
  } else if (effectiveWorkTime <= 11) {
    workTimeComment = "你的工作时间略长，但仍在可接受范围内。注意合理安排休息时间，避免长期疲劳。"
  } else {
    workTimeComment = "你的工作时间过长，长期如此可能影响健康和生活质量。建议寻找方法提高效率或与上级商量调整工作安排。"
  }

  if (restTimeNum >= 2.5) {
    workTimeComment += " 你有充足的休息和午休时间，这有助于恢复精力，提高下午的工作效率。"
  } else if (restTimeNum <= 1) {
    workTimeComment += " 你的休息时间较少，记得定期起身活动，防止久坐带来的健康问题。"
  }

  const annualLeaveNum = formData.annualLeave
  if (annualLeaveNum >= 15) {
    workTimeComment += " 丰富的年假让你有充分的时间休整和旅行，这对维持长期工作动力非常重要。"
  } else if (annualLeaveNum <= 5) {
    workTimeComment += " 你的年假较少，可以考虑更有效地规划和利用这些宝贵的休假时间。"
  }

  comments.push({
    title: '工作时间',
    content: workTimeComment,
    emoji: "⏱️",
    details: [
      { label: '每天工作', value: `${formData.workHours} 小时` },
      { label: '有效工作时间', value: `${effectiveWorkTime.toFixed(1)} 小时` },
      { label: '休息时间', value: `${formData.restTime} 小时` },
      { label: '年假', value: `${formData.annualLeave} 天/年` },
      { label: '带薪病假', value: `${formData.paidSickLeave} 天/年` },
      { label: '公共假期', value: `${formData.publicHolidays} 天/年` }
    ]
  })

  // 6. 教育背景与职业发展评价
  const degreeType = formData.degreeType
  const workYears = formData.workYears
  const jobStability = formData.jobStability

  let careerComment = ""
  if (degreeType === 'phd') {
    careerComment = "博士学历是你职场的一张重要名片，为你打开了许多高端研究和专业岗位的大门。"
  } else if (degreeType === 'masters') {
    careerComment = "硕士学历在当今就业市场仍有一定优势，证明了你的学习能力和专业素养。"
  } else if (degreeType === 'bachelor') {
    careerComment = "本科学历为你的职业生涯奠定了坚实基础，结合实际经验，你能在各个领域找到发展机会。"
  } else {
    careerComment = "专科及以下学历虽然在某些领域可能面临挑战，但实践经验和专业技能同样能帮你赢得认可。"
  }

  if (workYears === '0') {
    careerComment += " 作为应届生，你充满朝气和学习热情，有无限的可能性去探索和成长。"
  } else if (parseInt(workYears) >= 10) {
    careerComment += " 多年的工作经验是你最宝贵的财富，让你在职场中更加从容和自信。"
  } else {
    careerComment += " 几年的工作经验让你更加了解行业和自己的优势，职业发展正处于上升期。"
  }

  if (jobStability === 'government') {
    careerComment += " 政府/事业单位的工作稳定性高，让你无需过多担忧失业风险，可以更从容地规划未来。"
  } else if (['private', 'foreign', 'state'].includes(jobStability)) {
    careerComment += " 企业的工作虽然有一定风险，但也提供了更多成长和收入提升的机会。"
  } else if (jobStability === 'dispatch') {
    careerComment += " 劳务派遣/OD的工作灵活度高，但稳定性较低。在享受短期便利的同时，应积极规划长远职业发展路径。"
  } else if (jobStability === 'freelance') {
    careerComment += " 自由职业提供了极高的灵活性和自主性，但也伴随着收入不稳定和福利缺失的风险。"
  }

  const workYearsDesc = workYears === '0' ? '应届生' : workYears === '1' ? '1-3年' : workYears === '3' ? '3-5年' : workYears === '5' ? '5-8年' : workYears === '8' ? '8-10年' : workYears === '10' ? '10-12年' : '12年以上'

  comments.push({
    title: '教育与工作经验',
    content: careerComment,
    emoji: "📚",
    details: [
      { label: '最高学历', value: getDegreeDesc(degreeType) },
      { label: '工作年限', value: workYearsDesc },
      { label: '工作类型', value: getJobStabilityDesc(jobStability) }
    ]
  })

  // 7. 薪资评价
  const dailySalary = details.dailySalary

  let salaryComment = ""
  if (dailySalary >= 1000) {
    salaryComment = "您的日薪处于较高水平，财务状况良好，能够满足日常生活和一定的休闲娱乐需求。"
  } else if (dailySalary >= 500) {
    salaryComment = "您的日薪处于中等水平，足以应对基本生活需求，但可能需要更细致的预算规划。"
  } else {
    salaryComment = "您的日薪较低，可能需要精打细算来管理财务，同时寻找提升收入的机会。"
  }

  // 考虑城市因素
  if (formData.cityFactor === '0.70' || formData.cityFactor === '0.80') {
    salaryComment += " 在高生活成本的城市，你的薪资需要更精明地管理才能达到理想的生活质量。"
  } else if (['1.25', '1.40', '1.50'].includes(formData.cityFactor)) {
    salaryComment += " 在低生活成本的地区，你的薪资能够带来更高的生活质量和更多的储蓄机会。"
  }

  comments.push({
    title: '薪资水平',
    content: salaryComment,
    emoji: "💰",
    details: [
      { label: '日薪', value: `${getCurrencySymbol()}${dailySalary.toFixed(0)}/天` },
      { label: '年工作天数', value: `${details.workDaysPerYear} 天` }
    ]
  })

  // 8. 总结性价比评价
  let valueComment = ""
  if (value < 1.0) {
    valueComment = "虽然目前的工作性价比较低，但这可能是积累经验的必经阶段。记住每份工作都有其价值，努力汲取经验，为下一步发展打好基础。"
  } else if (value <= 2.0) {
    valueComment = "你的工作性价比处于中等水平，有优点也有不足。可以专注于现有优势，同时寻找提升不足方面的方法，让工作体验更加全面。"
  } else {
    valueComment = "恭喜你拥有高性价比的工作！这样的机会难得，要珍惜现在的环境，继续发挥自己的优势，享受工作带来的成就感和满足感。"
  }

  comments.push({
    title: '综合建议',
    content: valueComment,
    emoji: "💎",
    details: []
  })

  return comments
}


// 格式化评估结果为可读字符串
const formatResultToString = (result: JobWorthResultVO) => {
  if (!result) return ''

  const lines = []
  const separator = '='.repeat(50)

  lines.push(separator)
  lines.push('📊 工作价值评估结果报告')
  lines.push(separator)
  lines.push('')

  // 基本信息
  lines.push('📋 基本信息:')
  if (formData.jobTitle) {
    lines.push(`- 岗位名称: ${formData.jobTitle}`)
  }
  lines.push(`- 年薪: ${getCurrencySymbol()}${formData.salary?.toLocaleString()}`)
  lines.push(`- 工作地点: ${getCountryName(formData.countryCode)}`)
  lines.push(`- 工作类型: ${getJobStabilityDesc(formData.jobStability)}`)
  lines.push(`- 学历水平: ${getDegreeDesc(formData.degreeType)}`)
  lines.push(`- 工作年限: ${formData.workYears === '0' ? '应届生' : `${formData.workYears}年`}`)
  lines.push('')

  // 核心指标
  lines.push('🎯 核心指标:')
  lines.push(`- 工作价值评分: ${result.value.toFixed(2)}`)
  lines.push(`- 综合评价: ${result.grade}`)
  lines.push(`- 年工作天数: ${result.details.workDaysPerYear}天`)
  lines.push(`- 平均日薪: ${getCurrencySymbol()}${result.details.dailySalary.toFixed(0)}`)
  lines.push('')

  // 详细分析
  lines.push('📝 详细分析:')
  result.comments.forEach((comment, index) => {
    lines.push(`${index + 1}. ${comment.emoji} ${comment.title}`)
    lines.push(`   ${comment.content}`)

    if (comment.details && comment.details.length > 0) {
      comment.details.forEach((detail: DetailItem) => {
        lines.push(`   - ${detail.label}: ${detail.value}`)
      })
    }
    lines.push('')
  })

  // 工作配置
  lines.push('⚙️ 工作配置:')
  lines.push(`- 每周工作: ${formData.workDaysPerWeek}天，每天${formData.workHours}小时`)
  lines.push(`- 通勤时间: ${formData.commuteHours}小时/天`)
  lines.push(`- 远程办公: ${formData.wfhDaysPerWeek}天/周`)
  lines.push(`- 休息时间: ${formData.restTime}小时/天`)
  lines.push(`- 年假: ${formData.annualLeave}天`)
  lines.push(`- 带薪病假: ${formData.paidSickLeave}天`)
  lines.push('')

  // 环境因素
  lines.push('🏢 环境因素:')
  lines.push(`- 城市等级: ${getCityDesc(formData.cityFactor)}`)
  lines.push(`- 是否在家乡工作: ${formData.isHomeTown === 'true' ? '是' : '否'}`)
  lines.push(`- 工作环境: ${getWorkEnvDesc(formData.workEnvironment)}`)
  lines.push(`- 领导关系: ${getLeadershipDesc(formData.leadership)}`)
  lines.push(`- 团队氛围: ${getTeamDesc(formData.teamwork)}`)
  if (formData.hasShuttle) lines.push(`- 班车服务: 有`)
  if (formData.hasCanteen) lines.push(`- 食堂服务: 有`)
  lines.push('')

  // 计算详情
  lines.push('🔢 计算详情:')
  lines.push(`- 环境因子: ${result.details.environmentFactor.toFixed(2)}`)
  lines.push(`- 教育因子: ${result.details.educationFactor.toFixed(2)}`)
  lines.push(`- 经验倍数: ${result.details.experienceMultiplier.toFixed(2)}`)
  lines.push(`- 计算耗时: ${result.calculationTime}ms`)
  lines.push('')

  lines.push(separator)
  lines.push(`生成时间: ${new Date().toLocaleString()}`)
  lines.push(separator)

  return lines.join('\n')
}

// 本地计算工作价值
const handleCalculate = () => {
  if (!formData.salary) {
    message.warning('请输入年薪')
    return
  }

  calculating.value = true
  hasCalculated.value = true

  try {
    const startTime = Date.now()

    // 执行本地计算
    const workDaysPerYear = calculateWorkingDays()
    const dailySalary = calculateDailySalary(workDaysPerYear)
    const effectiveWorkHours = calculateEffectiveWorkHours()
    const environmentFactor = calculateEnvironmentFactor()
    const educationFactor = calculateEducationFactor()
    const experienceMultiplier = calculateExperienceMultiplier()
    const value = calculateJobWorthValue()

    const calculationTime = Date.now() - startTime

    // 构建计算详情
    const details = {
      dailySalary,
      workDaysPerYear,
      environmentFactor,
      effectiveWorkHours,
      educationFactor,
      experienceMultiplier
    }

    // 构建结果
    result.value = {
      value,
      grade: getValueAssessment(value),
      gradeDescription: getGradeDescription(value),
      details,
      calculationTime,
      comments: generateComments(value, details)
    }

    // 将评估结果转换为可读字符串并打印到控制台
    const formattedResult = formatResultToString(result.value)
    console.log('\n' + formattedResult)
    console.log('\n📋 以上是格式化的工作价值评估结果，方便AI进行总结分析')

    message.success('计算完成，正在启动AI分析...')

    // 保存到历史记录
    saveToHistory()

    // 自动触发AI分析
    setTimeout(() => {
      handleAIAnalysis()
    }, 500) // 延迟500ms，让用户看到计算完成的提示
  } catch (error) {
    console.error('计算失败:', error)
    message.error('计算失败，请稍后重试')
  } finally {
    calculating.value = false
  }
}
// 保存到历史记录
const saveToHistory = () => {
  if (!formData.salary || !result.value) return

  const item: HistoryItem = {
    id: Date.now().toString(),
    timestamp: Date.now(),
    value: result.value.value,
    assessment: getValueAssessment(result.value.value),
    salary: formData.salary,
    countryCode: formData.countryCode,
    formData: { ...formData }
  }

  history.value.unshift(item)
  if (history.value.length > 10) {
    history.value = history.value.slice(0, 10)
  }

  localStorage.setItem('jobWorthHistory', JSON.stringify(history.value))
  message.success('已保存到历史记录')
}

// 恢复历史记录
const restoreHistory = (item: HistoryItem) => {
  Object.assign(formData, item.formData)
  message.success('已恢复历史记录')
}

// 删除历史记录
const deleteHistory = (id: string) => {
  history.value = history.value.filter((item: HistoryItem) => item.id !== id)
  localStorage.setItem('jobWorthHistory', JSON.stringify(history.value))
  message.success('已删除')
}

// 清空历史
const clearHistory = () => {
  history.value = []
  localStorage.removeItem('jobWorthHistory')
  message.success('已清空历史记录')
}


// 使用说明配置
const usageGuideConfig = {
  title: '使用说明',
  steps: [
    '填写您的年薪（税前）和工作相关信息',
    '选择您的学历背景、工作年限和工作类型',
    '配置工作环境、城市等级、领导和团队情况',
    '点击"计算工作价值"查看评估结果',
    '查看详细的工作价值分析和改进建议'
  ],
  tips: [
    '请如实填写信息以获得准确的评估结果',
    '支持多个国家/地区的PPP转换，自动标准化薪资',
    '历史记录自动保存，方便对比不同工作机会',
    '所有计算都在本地完成，无需网络连接'
  ],
  example: '例如：年薪30万，每周工作5天，每天10小时，通勤2小时，在新一线城市的私企/狼性文化工作'
}

// 防抖保存表单数据
let saveTimer: ReturnType<typeof setTimeout> | null = null
const debouncedSaveFormData = () => {
  if (saveTimer) {
    clearTimeout(saveTimer)
  }
  saveTimer = setTimeout(async () => {
    try {
      await indexedDBUtils.saveFormData(formData)
      console.log('表单数据已自动保存')
    } catch (error) {
      console.error('自动保存失败:', error)
    }
  }, 1000) // 1秒防抖
}

// 监听表单数据变化，自动保存
watch(
  formData,
  () => {
    // 只有当表单有实际数据时才保存（避免保存空表单）
    if (formData.salary && formData.salary > 0) {
      debouncedSaveFormData()
    }
  },
  { deep: true }
)

// ========== AI 分析功能 ==========

// AI 分析处理函数
const handleAIAnalysis = async () => {
  if (!result.value) {
    message.warning('请先进行工作价值计算')
    return
  }

  isAnalyzing.value = true
  aiAnalysisResult.value = ''

  try {
    // 将评估结果转换为文本格式传给 AI
    const evaluationText = formatResultToString(result.value)

    const reader = await analyzeJobWorth(evaluationText)

    await SSEClient.processStream(reader, {
      targetRef: aiAnalysisResult,
      clearBeforeStart: true,
      onError: (err) => {
        message.error(err.message || 'AI 分析失败，请重试')
      },
      onComplete: () => {
        isAnalyzing.value = false
        message.success('AI 分析完成')
      }
    })
  } catch (error) {
    console.error('AI 分析失败:', error)
    message.error('AI 分析失败，请稍后重试')
    isAnalyzing.value = false
  }
}


// 组件挂载时恢复表单数据和历史记录
onMounted(async () => {
  // 1. 初始化IndexedDB并恢复表单数据
  try {
    await indexedDBUtils.init()
    const savedFormData = await indexedDBUtils.getFormData()

    if (savedFormData) {
      // 恢复表单数据，保留响应式
      Object.assign(formData, savedFormData)
      console.log('表单数据已从 IndexedDB 恢复')
console.log(formData);

      // 显示恢复提示
      await nextTick()
      message.info('已自动恢复上次填写的表单数据', { duration: 3000 })
    }
  } catch (error) {
    console.error('恢复表单数据失败:', error)
  }

  // 2. 加载历史记录（保持原有功能）
  const savedHistory = localStorage.getItem('jobWorthHistory')
  if (savedHistory) {
    try {
      history.value = JSON.parse(savedHistory)
    } catch (e) {
      console.error('加载历史记录失败', e)
    }
  }
})
</script>

<style scoped lang="less">
.job-worth-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  .form-card,
  .result-card,
  .history-card {
    margin-bottom: 24px;
  }

  .form-section {
    margin-bottom: 24px;

    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      color: var(--n-text-color);
    }
  }

  .sub-section {
    margin-bottom: 20px;

    .sub-section-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--n-text-color-secondary);
      padding-left: 8px;
      border-left: 3px solid var(--n-primary-color);
    }
  }

  .radio-group {
    margin-bottom: 16px;

    .radio-group-label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 8px;
      color: var(--n-text-color);
    }

    :deep(.n-radio-group) {
      .n-space {
        flex-wrap: wrap;
      }
    }
  }

  .checkbox-group {
    margin-bottom: 16px;

    :deep(.n-checkbox) {
      margin-bottom: 8px;
    }
  }

  .result-container {
    .evaluation-result {
      text-align: center;
      padding: 24px;
      margin: 24px 0;
      background: var(--n-color-modal);
      border-radius: 8px;

      h3 {
        margin: 0 0 16px 0;
        font-size: 20px;
      }

      .grade-badge {
        display: inline-block;
        padding: 8px 24px;
        font-size: 24px;
        font-weight: bold;
        border-radius: 24px;
        margin-bottom: 16px;

        &.grade-terrible {
          background: #ffebee;
          color: #c62828;
        }

        &.grade-poor {
          background: #fff3e0;
          color: #e65100;
        }

        &.grade-average {
          background: #fff8e1;
          color: #f57c00;
        }

        &.grade-good {
          background: #e3f2fd;
          color: #1565c0;
        }

        &.grade-great {
          background: #e8f5e9;
          color: #2e7d32;
        }

        &.grade-excellent {
          background: #f3e5f5;
          color: #6a1b9a;
        }

        &.grade-perfect {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
        }
      }

      .grade-description {
        color: var(--n-text-color-secondary);
        font-size: 16px;
        margin: 0;
      }
    }

    .detail-analysis {
      margin-top: 24px;

      h3 {
        margin: 0 0 16px 0;
        font-size: 18px;
      }

      .analysis-item {
        padding: 16px;
        margin-bottom: 12px;
        background: var(--n-color-modal);
        border-radius: 8px;
        border-left: 4px solid var(--n-primary-color);

        h4 {
          margin: 0 0 8px 0;
          font-size: 16px;
        }

        p {
          margin: 0 0 12px 0;
          color: var(--n-text-color-secondary);
          line-height: 1.6;
        }

        .comment-details {
          margin-top: 12px;
          padding-top: 12px;
          border-top: 1px solid var(--n-border-color);

          .details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 8px;

            .detail-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 6px 0;

              .detail-label {
                font-size: 12px;
                color: var(--n-text-color-secondary);
                opacity: 0.8;
              }

              .detail-value {
                font-size: 13px;
                font-weight: 500;
                color: var(--n-text-color);
              }
            }
          }
        }
      }
    }
  }


  @media (max-width: 768px) {
    padding: 0 8px;

    .form-section {
      .section-title {
        font-size: 16px;
      }
    }

    .radio-group {
      :deep(.n-radio-group) {
        .n-radio {
          margin-right: 8px;
          margin-bottom: 8px;
        }
      }
    }

    .result-container {
      .evaluation-result {
        padding: 16px;

        .grade-badge {
          font-size: 20px;
          padding: 6px 16px;
        }
      }

      .detail-analysis {
        .analysis-item {
          .comment-details {
            .details-grid {
              grid-template-columns: 1fr;
              gap: 4px;

              .detail-item {
                padding: 4px 0;

                .detail-label {
                  font-size: 11px;
                }

                .detail-value {
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
  }

  // AI 分析样式
  .ai-analysis-section {
    margin: 24px 0;

    h3 {
      margin: 0 0 16px 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--n-text-color);
    }

    .loading-state {
      text-align: center;
      padding: 32px 20px;
      border: 1px solid var(--n-border-color);
      border-radius: 8px;
      background-color: var(--n-card-color);
    }

    .analysis-result {
      .streaming-result {
        min-height: 150px;
        border: 1px solid var(--n-border-color);
        border-radius: 8px;
        padding: 16px;
        background-color: var(--n-card-color);

        &.is-streaming {
          position: relative;

          &::after {
            content: '';
            position: absolute;
            bottom: 8px;
            right: 12px;
            width: 8px;
            height: 8px;
            background-color: var(--n-primary-color);
            border-radius: 50%;
            animation: typing-pulse 1.5s infinite;
          }
        }
      }
    }
  }
}

@keyframes typing-pulse {
  0%, 50% {
    opacity: 1;
    transform: scale(1);
  }
  25%, 75% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}
</style>
